<template>
  <div class="app-map">
    <div id="dotMap" class="app-map-dot" :style="mapScale"></div>
  </div>
</template>

<script>
import AMap from 'AMap'

export default {
  name: 'mapDot',
  props: ['width', 'height', 'mapStyle', 'uniqueId', 'iconName', 'popWindowTemp', 'popWindowCallback', 'lngLat', 'zoom', 'needRefresh', 'dotList'],
  data () {
    return {
      map: {}, // 地图实例化
      mapConfig: {
        width: this.width || '100%',
        height: this.height || '100%',
        mapStyle: this.mapStyle || 'amap://styles/normal', // 地图样式
        uniqueId: this.uniqueId || 'eventSysId', // 唯一ID的name
        iconName: this.iconName || 'icon', // icon对应的name
        popWindowTemp: this.popWindowTemp || '', // 弹窗自定义样式
        popWindowCallback: this.popWindowCallback || '', // 弹窗弹出后的回调
        lngLat: this.lngLat || [121.423224, 31.223914], // 默认经纬度
        zoom: this.zoom || 19, // 地图默认缩放大小
        needRefresh: this.needRefresh || false, // 是否强制刷新所有点
        dotList: this.dotList || [] // 点的数据
      },
      addTimes: 0, // dotList变化的次数
      newTemp: {}, // 新列表临时存放
      oldTemp: {}, // 旧列表临时存放
      mapScale: '', // 地图大小样式
      nowId: '' // 当前弹窗的id
    }
  },
  computed: {},
  mounted: function () {
    let config = this.mapConfig
    this.mapScale = {
      width: config.width,
      height: config.height
    }
    this.map = new AMap.Map('dotMap', { mapStyle: config.mapStyle })
    let point = new AMap.LngLat(config.lngLat[0], config.lngLat[1])
    this.map.setCenter(point)
    this.map.setZoom(config.zoom)
    this.$store.commit('setSupMap', this)
  },
  watch: {
    'dotList': function (res) {
      if (!res || res.length === 0) {
        return
      }
      // 将原来的值传给oldTemp后立即清空
      this.oldTemp = Object.assign({}, this.newTemp)
      this.newTemp = {}
      for (let i = 0, len = res.length; i < len; i++) {
        // this.newTemp[item[this.mapConfig.uniqueId]] = 1
        if (i === 0 && !this.addTimes) {
          this.addDot(res[i], true)
        } else {
          this.addDot(res[i])
        }
      }
      this.addTimes++
      setTimeout(() => {
        this.removeOldDot()
      }, 0)
    }
  },
  methods: {
    // 新增点后删除旧的点
    removeOldDot () {
      // 获取之前打开的infoWindow的id，判断刷新后是否需要再次打开
      if (this.nowId && this.newTemp[this.nowId]) {
        let bool = this.oldTemp[this.nowId]['infoWindow'].getIsOpen()
        bool ? this.openWindow(this.nowId) : this.nowId = ''
      }

      for (let o in this.oldTemp) {
        let item = this.oldTemp[o]
        this.map.remove(item['marker'])
        item['infoWindow'].close()
      }
    },

    // 添加点位
    addDot (data, bool) {
      let item = data
      let _this = this
      // let AMap = this.map
      let config = this.mapConfig

      let arr = this.$base.transCoordinate(item.gpsLng, item.gpsLat, item.mapType)
      let newLng = arr[0].toFixed(6)
      let newLat = arr[1].toFixed(6)
      let point = new AMap.LngLat(newLng, newLat)
      let bgColor = data.bgColor || '#F6511D'
      let marker = new AMap.Marker({
        position: point,
        // icon: icon,
        content: '<div class="' + item[config.iconName] + '" style="color: #fff; background-color: ' + bgColor + '; width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 100%; font-size: 16px;"></div>',
        title: ''
      })

      let content = this.createPopHtml(item)
      let infoWindow = new AMap.InfoWindow({
        content,
        offset: new AMap.Pixel(6, -20)
      })
      if (bool) {
        this.map.setCenter(point)
        // this.map.setZoom(19);
      }
      this.newTemp[item[config.uniqueId]] = {}
      this.newTemp[item[config.uniqueId]]['marker'] = marker
      this.newTemp[item[config.uniqueId]]['point'] = point
      this.newTemp[item[config.uniqueId]]['infoWindow'] = infoWindow

      this.map.add(marker)

      // marker点击事件添加
      marker.on('click', function () {
        _this.nowId = item[config.uniqueId]
        // 有内容才显示弹窗
        if (content) {
          infoWindow.open(_this.map, point)
          if (_this.popWindowCallback) {
            _this.popWindowCallback()
          }
        }
      })
    },
    // 弹窗渲染方法
    createPopHtml (data) {
      let config = this.mapConfig
      if (config.popWindowTemp) {
        return config.popWindowTemp(data)
      } else {
        return ''
      }
    },
    openWindow (id) {
      let point = this.newTemp[id]['point']
      let infoWindow = this.newTemp[id]['infoWindow']
      this.nowId = id
      infoWindow.open(this.map, point)
      if (this.popWindowCallback) {
        this.popWindowCallback()
      }
    },
    // 移动到点位置及打开infoWindow
    moveToDot (id) {
      let point = this.newTemp[id]['point']
      let infoWindow = this.newTemp[id]['infoWindow']
      this.nowId = id
      this.map.setCenter(point)
      infoWindow.open(this.map, point)
      if (this.popWindowCallback) {
        this.popWindowCallback()
      }
    },
    // 清空标记
    clearDots () {
      this.newTemp = {}
      this.oldTemp = {}
      this.map.clearMap()
    }
  }
}
</script>

<style lang="less" scoped>
.app-map {
  height: 100%;
  /deep/.mapStyle h2 {
    font-size: 14px;
    color: #f90;
    text-align: center;
  }
  /deep/.mapStyle li {
    list-style: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    line-height: 30px;
    padding: 2px 0;
  }
  /deep/.mapStyle-left {
    float: left;
    text-align: left;
    color: #9FACC3;
  }
  /deep/.mapStyle-right {
    float: right;
    text-align: right;
    color: #fff;
    width: 180px;
  }
  /deep/.mapStyle-right .high {
    color: #ff6600;
  }
  /deep/.myStyle-img {
    float: left;
    margin-left: 5px;
    width: 56px;
    height: 42px;
    overflow: hidden;
  }
  /deep/.myStyle-img img {
    width: 56px;
  }
  /deep/.mapStyle a {
    display: block;
    width: 245px;
    height: 40px;
    line-height: 40px;
    background-color: #ff6600;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
  }
  /deep/.mapStyle h2 {
    margin: 0;
  }
  /deep/.amap-info-content {
    padding: 10px 15px 10px 15px;
    background: rgba(43, 54, 72, 0.95);
    box-shadow: 0 0 40px rgba(0, 0, 0, .9);
    border: none;
  }

  /deep/.amap-info-content:hover {
    box-shadow: 0 0 40px rgba(0, 0, 0, .9);
  }

  /deep/.amap-info-sharp {
    background: url("/images/marker_icon.png") no-repeat;
  }
}
</style>
